<template>
    <div class="dimension">
        <a-select style="width:228px" v-model="selectedReport">     
            <a-select-opt-group v-for="(item,key) in series" :key="1+'-'+key">
                <span slot="label">{{item.title}}（{{item.children.length}}）</span>
                <a-select-option  v-for="i in item.children" :key="i.cube_ID" :value="'1-'+i.cube_ID">
                    {{i.cube_NAME}}
                </a-select-option>
            </a-select-opt-group>
        </a-select>

        <div class="h2">选择序列</div>
        <div class="select-wrap" @click.stop="toggleIndicator">
            <div class="selected">序列（已选择{{selectedIndicators.length}}）</div>
            <a-icon type="caret-down" />
            <div class="list" ref="indicators">
                <a-checkbox-group v-model="selectedIndicators">
                    <div class="item" v-for="item in indicators" :key="item.dimCode">
                        <a-checkbox :value="item.dimCode">{{item.dimName}}</a-checkbox>
                    </div>
                </a-checkbox-group>
            </div>
        </div>

        <div class="h2">起止时间</div>
        <a-select default-value="开始时间" style="width: 100px" v-model="startYear">
            <a-icon slot="suffixIcon" type="caret-down" />
            <a-select-option v-for="item in times" :key="item.dimCode" :value="item.dimCode">
                {{item.dimName}}
            </a-select-option>
        </a-select>
        <span class="split">~</span>
        <a-select default-value="结束时间" style="width: 100px" v-model="endYear">
            <a-icon slot="suffixIcon" type="caret-down" />       
            <a-select-option v-for="item in times" :key="item.dimCode" :value="item.dimCode">
                {{item.dimName}}
            </a-select-option>
        </a-select>

        <div class="sync-data-btn" @click="sync">
            <a-icon type="right" />
            <span class="iconfont icon-sousuo"></span>
            查询
        </div>
    </div>
</template>

<script>
export default {
    props:{
        series:{type:Array,default:()=>[]},
        myDatas:{type:Array,default:()=>[]},
        indicators:{type:Array,default:()=>[]},
        times:{type:Array,default:()=>[]},
        allSeriesLength:{type:Number,default:0},
        myDatasLength:{type:Number,default:0},
        goSync:{type:Function,default:()=>{}},
        selectedStartYear:{type:String,default:''},
        selectedEndYear:{type:String,default:''}
    },
    data() {
        return {            
            selectedIndicators:[],
            selectedReport:'',
            startYear:'',
            endYear:''
        }
    },
    watch:{
        selectedStartYear(value) {
            this.startYear = value;
        },
        selectedEndYear(value) {
            this.endYear = value;
        }
    },
    created() {
        let reportId = this.$route.query.reportId;
        let uploadId = this.$route.query.uploadId;
        if(reportId) {
            this.selectedReport = '1-'+reportId;
        } else if(uploadId) {
            this.selectedReport = '2-'+uploadId;
        }

        if(this.selectedStartYear) {
            this.startYear = this.selectedStartYear
        }
        if(this.selectedEndYear) {
            this.endYear = this.selectedEndYear
        }
    },
    mounted() {
        document.onclick = ()=>{
            this.$refs.indicators.style.display = 'none';
        }
    },
    methods:{
    
        toggleIndicator() {
            let dom = this.$refs.indicators;
            if(dom.style.display==='block') {
                dom.style.display='none';
            } else{
                dom.style.display='block';
            }
        },
        sync() {
            this.goSync('222')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../scss/_variables.scss';

</style>